import React, { useEffect } from 'react'
import { Button, Form, Input, message, Modal, Space } from 'antd'
import { useAppDispatch } from '@/hooks'
import { addOrUpdateHospSetAsync } from '@/store/slice/hosp'

type THospSetMadel = {
    isModalVisible: boolean
    setIsModalVisible: React.Dispatch<React.SetStateAction<boolean>>
    modalTitle: string
    modalData: any
}

function HospSetMadel(props: THospSetMadel) {
    const [form] = Form.useForm() // 表单实例
    const dispatch = useAppDispatch()
    useEffect(() => {
        // 判断modalData是否有值，有值就是修改，没有值就是添加
        if (props.modalData) {
            if (props.modalData.id) {
                // 修改
                form.setFieldsValue(props.modalData) // 设置表单数据
            } else {
                // 添加
                form.resetFields() // 重置表单数据
            }
        }
    }, [props.modalData])
    return (
        <Modal
            title={props.modalTitle} // 模态框标题
            visible={props.isModalVisible} // 是否展示
            footer={null} // 底部内容，当不需要默认底部按钮时，可以设为 footer={null}
            maskClosable={false} // 点击蒙层是否允许关闭
            onCancel={() => {
                props.setIsModalVisible(false) // 关闭模态框
            }}
        >
            <Form
                form={form}
                name="basic"
                labelCol={{ span: 5 }}
                wrapperCol={{ span: 19 }}
                onFinish={async (values) => {
                    await dispatch(addOrUpdateHospSetAsync(values))
                    form.resetFields() // 清空表单
                    props.setIsModalVisible(false)
                    message.success(props.modalTitle + '成功')
                }}
                autoComplete="off" // 关闭浏览器自动填充
            >
                <Form.Item
                    label="医院名称"
                    name="hosname"
                    rules={[
                        {
                            required: true,
                            min: 2,
                            max: 20,
                            message: '请输入医院名称!长度为2-15'
                        }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="医院编号"
                    name="hoscode"
                    rules={[
                        {
                            required: true,
                            message: '请输入医院编号'
                        }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="API基础地址"
                    name="apiUrl"
                    rules={[
                        {
                            required: true,
                            pattern:
                                /^https?:\/\/(([a-zA-Z0-9_-])+(\.)?)*(:\d+)?(\/((\.)?(\?)?=?&?[a-zA-Z0-9_-](\?)?)*)*$/i,
                            message: '请输入正确的API基础地址'
                        }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人姓名"
                    name="contactsName"
                    rules={[
                        {
                            required: true,
                            message: '请输入正确的联系人姓名'
                        }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    label="联系人手机"
                    name="contactsPhone"
                    rules={[
                        {
                            required: true,
                            pattern: /^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/,
                            message: '请输入正确的联系人手机'
                        }
                    ]}
                >
                    <Input />
                </Form.Item>

                <Form.Item wrapperCol={{ offset: 5, span: 19 }}>
                    <Space>
                        <Button type="primary" htmlType="submit">
                            提交
                        </Button>
                        <Button
                            htmlType="button"
                            onClick={() => {
                                form.resetFields() // 清空表单
                            }}
                        >
                            清空
                        </Button>
                    </Space>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default HospSetMadel
